<template>
  <div class="searchBox">
    <div class="top">
      <img @click="back" class="back" src="../static/img/back0.png"/>
      <div class="search fl clearfix">
        <input v-model="txt" type="text" :placeholder="$t('m.searchPlace')"/>
        <img src="../static/img/search.png"/>
      </div>
      <span v-if="txt" @click="searchHotData" class="cancel">{{$t('m.search')}}</span>
      <span v-else @click="back" class="cancel">{{$t('m.cancel')}}</span>
    </div>
    <div class="wrap">
      <p class="title"><img src="../static/img/hotCity.png"/>{{$t('m.hotDes')}}</p>
      <div class="null" v-if="hotCityData"><img src="../static/img/null.png" alt=""><p>暂无数据！</p></div>
      <div class="content clearfix">
        <p class="item" v-for="(item,index) in hotCity" :key="index" @click="toDetail(item.id)">{{item.cityName}}</p>
      </div>
    </div>
    <div class="wrap">
      <p class="title"><img src="../static/img/hotCity.png"/>{{$t('m.poDes')}}</p>
      <div class="null" v-if="hotAreaData"><img src="../static/img/null.png" alt=""><p>暂无数据！</p></div>
      <div class="content clearfix">
        <p class="item" v-for="(item,index) in hotArea" :key="index" @click="toAreaDetail(item.id)">{{item.site_name}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      data(){
        return{
          txt:'',
          hotCity:[],
          hotArea:[],
          hotCityData:false,
          hotAreaData:false
        }
      },
      methods:{
        back(){
          this.$store.state.showSearch = false
        },
        search(){
          this.$router.push('/searchList?value='+ this.txt +'')
        },
        //默认搜索框内容
        defaultHotData(){
          let that = this;
          this.$axios.get(this.$store.state.apiUrl+'index/searchCityAndSite?lang='+that.$i18n.locale)
            .then(function (res) {
              let rt = res.data.data;
              console.log(rt)
              if ( rt.cities.length == 0 ){
                that.hotCityData = true;
              }else{
                that.hotCityData = false;
                that.hotCity = res.data.data.cities;
              }
              if ( rt.sites.length == 0 ){
                that.hotAreaData = true;
              }else{
                that.hotAreaData = false;
                that.hotArea = res.data.data.sites;
              }
            })
            .catch(function () {
              console.log('fail')
            })
        },
        //搜索
        searchHotData(){
          let that = this;
          this.$axios.get(this.$store.state.apiUrl+'index/search',{
            params:{
              inputParam: that.txt
            }
          })
            .then(function (res) {
                that.hotCity = '';
                that.hotArea = '';
                let rt = res.data.data;
              console.log(rt)
              if ( rt.cities.length == 0 ){
                that.hotCityData = true;
              }else{
                that.hotCityData = false;
                that.hotCity = res.data.data.cities;
              }
              if ( rt.sites.length == 0 ){
                that.hotAreaData = true;
              }else{
                that.hotAreaData = false;
                that.hotArea = res.data.data.sites;
              }
            })
            .catch(function () {
              console.log('fail')
            })
        },
        //推荐城市详情
        toDetail(i){
          this.$router.push('/searchList?id='+i+'&type=city')
        },
        //进入景点详情
        toAreaDetail(i){
          this.$router.push('/searchList?id='+i+'&type=spot');
        }
      },
      mounted(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      },
      created(){
        this.defaultHotData();
      }
    };
</script>

<style scoped="scoped" >
  .searchBox{background: #fff}
  .top{height: 0.32rem;margin-top: 0.06rem;padding-bottom: 0.06rem;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);}
  .search{width: 2.6rem;height: 100%;background: #F7F7F7; border: 1px solid #E6E6E6; line-height: 0.32rem;border-radius: 1rem;overflow: hidden;position: relative;}
  .search input{float: left;background: #F7F7F7;width: 100%;height: 100%;box-sizing: border-box;padding-left: 0.35rem;font-size: 0.12rem;color: #333;}
  .search input::placeholder{color: #ccc;}
  .search img{position: absolute;width: 0.15rem;height: 0.15rem;z-index: 2;left: 0.1rem;top: 0.04rem;}
  .back{transform:rotate(180deg);width: 0.1rem;height: 0.18rem;float: left;margin: 0.04rem 0.2rem 0 0.15rem;}
  .cancel{font-size: 0.16rem;color: #333333;line-height: 0.26rem;float: right;margin-right: 0.15rem;}
  .wrap{font-size: 0.13rem;color: #999999;line-height: 0.2rem;margin:0.15rem}
  .wrap .title{margin-bottom: 0.2rem}
  .wrap .title img{width: 0.2rem; vertical-align: text-bottom;margin-right: 0.1rem}
  .item{min-width: 0.65rem;box-sizing: border-box;padding: 0 0.06rem;height: 0.24rem;line-height: 0.24rem;text-align: center;background: #F7F7F7;  border-radius: 5px;font-size:0.13rem;float: left;color: #666666;margin: 0 0.1rem 0.15rem}
</style>
